<template>
  <div>
    <!-- 1.操作按钮区域 -->
    <div class="but">
      <el-button size="mini" type="primary" @click="buffer.isShow = true"
        >添加</el-button
      >
      <el-button size="mini" type="warning">批量删除</el-button>
    </div>
    <!-- 2.数据列表区域 -->
    <list-comp
      :roleList="roleList"
      @edit="editRole"
      @remove="removeRole"
    ></list-comp>

    <!-- 3.表单区域 -->
    <form-comp
      :buffer="buffer"
      ref="formRef"
      :menuList="menuList"
      @channel="getRoleList"
    ></form-comp>
  </div>
</template>

<script>
//引入数据列表、添加编辑表单组件
import listComp from "./components/List.vue";
import formComp from "./components/Form.vue";

export default {
  components: {
    listComp,
    formComp,
  },
  data() {
    return {
      roleList: [], //角色数据
      menuList: [],
      buffer: {
        isShow: false,
      },
    };
  },

  mounted() {
    //1.获取全部的角色数据
    this.getRoleList();
    //1.获取全部的菜单数据
    this.getMenuList();
  },
  methods: {
    //1.获取全部的角色数据
    getRoleList() {
      this.$api
        .reqRoleList()
        .then((res) => {
          console.log(res);
          this.roleList = res ? res : []; //为了避免为空 循环就会报错
        })
        .catch((err) => console.log(err));
    },
    //2.获取全部的菜单（权限）数据
    getMenuList() {
      this.$api
        .reqMenuList({ istree: true })
        .then((res) => {
          this.menuList = res ? res : []; //为了避免为空 循环就会报错
        })
        .catch((err) => console.log(err));
    },
    //3.编辑菜单数据
    editRole(info) {
    //   console.log(info)
      //3.1解构获取list组件传递的修改数据
      let { index, row } = info;
      //3.2删除无用字段

    //3.3父组件如何操作子组件 ref 将修改的旧数据赋值给form组件并弹窗展示
    this.$refs.formRef.form = JSON.parse(JSON.stringify(row));
    //3.4弹窗 表单组件 
    this.buffer.isShow = true;

    // 等到本次页面上的所有dom元素加载完毕后再执行函数内部的业务逻辑
    this.$nextTick(()=>{
        
    })
       
     
    },
    //4.删角色数据
    removeRole(info) {
      //3.1解构获取role组件传递的修改数据
      let { index, row } = info;
      //3.2提示用户是否删除
      this.$confirm("确定要删除吗?", "温馨提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          //3.2用户同意删除
          this.$api
            .reqRoleRemove({ id: row.id })
            .then((res) => {
              //3.4提示删除成功
              this.$notify({
                title: "成功",
                message: "删除成功",
                type: "success",
              });
              //3.5更新列表 重新获取列表数据
              this.getRoleList();
            })
            .catch((err) => console.log(err));
        })
        .catch(() => {});
    },
  },
};
</script>

<style scoped>
.but {
  margin: 20px 0;
}
</style>

